<template>
  <div id="div">
    <div id="login" style="box-shadow: 2px 2px 5px">
      <h1>博天金融</h1>
      <el-tabs v-model="activeName">
        <el-tab-pane label="-----------------------------" >
        </el-tab-pane>
        <el-tab-pane label="账号密码登录" name="second">
          <el-input v-model="user.username" placeholder="账户" style="width: 400px" class="input"></el-input>
          <el-input v-model="user.password" placeholder="密码" style="width: 400px;margin-bottom: 25px"class="input" show-password></el-input>
          <br>
          <el-checkbox style="margin-right: 250px">自动登录</el-checkbox>
          <el-link type="primary" @click="$router.push('/resetPsw')">忘记密码</el-link>
          <br>
          <el-button type="primary" style="width: 400px;margin-top: 20px;margin-bottom: 30px" @click="login()">登录</el-button>
          <br>
          <el-link type="primary" @click="$router.push('/ResetPswView')">注册账号</el-link>
        </el-tab-pane>
        <el-tab-pane label="手机号登录" name="first">
          <el-input v-model="user.phone" placeholder="手机号" style="width: 400px" class="input"></el-input>
          <el-input v-model="user.cde" placeholder="验证码" style="width: 230px;margin-bottom: 25px"class="input"></el-input>
          <el-button type="primary" style="width: 120px;height: 35px;margin-left: 50px" @click="toCode()">发送验证码</el-button>
          <el-button type="primary" style="width: 400px;margin-top: 10px;margin-bottom: 30px" @click="toPhoneLogin()">登录</el-button>
        </el-tab-pane>
        <el-tab-pane label="-----------------------------" >
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src

export default {
  data(){
   return{
     token:"",
     Homecode:200,
     activeName:'second',
     user:{},
     dialogTableVisible:false,
     formLabelWidth:"200px"
    }
  },
  methods:{
    //手机号验证码
    toCode(){
      if (this.user.phone!=null && this.user.phone.length==11 && this.user.phone!=''){
        this.axios.post(`user/user/loginCode?phone=${this.user.phone}`).then(res=>{
          if (res.data.code==200){
            this.$message.success("发送成功")
          }else {
            this.$message.error(res.data.msg)
          }

        })
      }else {
        this.$message.error("请输入正确的手机号")
      }
    },


    validatePhone(phone) {
      // 在这里添加更严格的手机号验证逻辑
      return phone != null && phone.length == 11 && phone != '';
    },

    validateCode(cde) {
      // 在这里可以添加更严格的验证码验证逻辑（如果需要）
      return cde != null && cde.length == 4 && cde != '';
    },
    //手机号登录
    toPhoneLogin() {
      // 验证手机号
      if (!this.validatePhone(this.user.phone)) {
        this.$message.error("请输入有效的手机号");
        return;
      }

      // 验证验证码
      if (!this.validateCode(this.user.cde)) {
        this.$message.error("请输入正确的验证码");
        return;
      }

      // 发起 Axios 请求
      this.axios.post(`user/user/phone`, this.user)
          .then(res => {
            if (res.data.code == 200) {
              // 存储数据（注意：确保没有敏感信息）
              localStorage.setItem('data', JSON.stringify(res.data));
              this.$router.push('/loanshome');
            } else {
              this.$message.error(res.data.msg);
            }
          })
          .catch(error => {
            // 处理网络错误或其他请求错误
            this.$message.error("网络错误或服务器无法处理请求");
            console.error(error);
          });
    },




    //账户密码登录
    login(){
      this.axios.post(`user/getshow`,this.user).then(res=>{
       if(res.data.code==200){
         //存储数据
         localStorage.setItem('user', JSON.stringify(res.data.data.user));
         this.$router.push('/loanshome');

       }else {
         this.$message.error(res.data.msg);
       }
      });
    }
  },
  created() {

  }
}
</script>

<style>
#div{
  width: 950px;
  height: 600px;
  padding-top: 100px;
  padding-left: 500px;
}
#login{
  box-sizing: border-box;
  padding-top: 50px;
  width: 550px;
  height: 550px;
}
.input{
  margin-top: 20px;
}
</style>
